<template>
    <router-view></router-view>
</template>

<script>
export default {
  name:'App'
}
</script>

<style lang="scss">
/*全局样式表*/
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

/**编辑框统一样式 */
.edit-box{
  display: flex;
  flex-direction: column; /**定义主轴为从上到下 */
  justify-content: center; /**edit-itme在垂直方向居中 */
  gap: 10px;
  // padding: 10px;
  font-size: 14px;
  & > .edit-item{
    display: flex;
    flex-direction: row; /**定义每个edit-item的主轴是从左到右 */
    & > .item-label{
      width: 80px;
      text-align: right; /**label标题水平靠右 */
      display: flex;
      flex-direction: column;
      justify-content: center; /**控制label标题文字垂直居中 */
    }
    & > .item-value{
      flex: 1;
    }
  }
}

/**垂直滚动条统一样式 */
.beautify-scrollbar{
  overflow: auto;
  &::-webkit-scrollbar{
      width: 2px; /* 设置滚动条的宽度 */
      height: 2px; /* 设置滚动条的高度 */
  }
  &::-webkit-scrollbar-thumb {
      background-color: #DCDCDC; /* 设置滚动条滑块的颜色 */
      border-radius: 2px; /* 设置滚动条滑块的圆角 */
  }
  &::-webkit-scrollbar-track {
      background-color: #fff; /* 设置滚动条轨道的颜色 */
      border-radius: 2px; /* 设置滚动条轨道的圆角 */
  }
}

/**鼠标拖动捕捉区统一样式 */
.resizer{
  width: 4px;/**设定一个宽度是为了容易让鼠标容易放到上面 */
  border-left: 1px solid #e2e1e4;
  cursor: ew-resize; /**显示表示水平拖动的左右箭头 */
}

/**文字省略(注意需要设置width) */
.ellipsis-text{
  white-space: nowrap;  /* 禁止文字换行 */
  overflow: hidden;     /* 超出部分隐藏（用overflow-x也可） */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
</style>